<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<%@ taglib uri="http://www.springframework.org/tags/form" prefix="form"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags" %>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>

<link rel="stylesheet" href="styles/pizza-style/style.css">

<script src="js/common/submitform.js" type="text/javascript"></script>
<script src="js/common/jquery.js" type="text/javascript"></script>
<script src="js/common/lib.js" type="text/javascript"></script>
<script type="text/javascript">
function setValue()
{
	submitForm("pizza/makePayment.action",$("#form_shipAddr"));
}

</script>

<style>
.error{
	color: red;
	font-weight: bold;
}
</style>
</head>
<body>

<div id="wrapper">
	<div class="header"></div>
	<div class="order-content">
		<div id="order-payment" class="review-order" style="float:left; padding-right: 0px;">
			<h3>Finalise your order</h3>
			<form:form id="form_shipAddr" method="POST" action="makePayment.action" commandName="confirmOrderBean">
				<div><form:errors path="*" cssClass="error"/></div>
				<div style="border-bottom: 2px solid white;" class="order-sub-content">
					 <h4>Please enter the details to complete your order:</h4>
        			 <p>
        			 	<input id="fn" name="shipAddr.fn" value="First Name" onblur="isValidName('fn','First Name'); this.value=!this.value?'First Name':this.value;" onclick="this.value='';" class="customer-info-text" maxlength="20" style="border-color: red !important"/> 
        			 	<input id="ln" name="shipAddr.ln" value="Last Name" onblur="isValidName('ln','Last Name');this.value=!this.value?'Last Name':this.value;" onclick="this.value='';" class="customer-info-text" maxlength="20" style="border-color: red !important"/>
            			<input id="email" name="shipAddr.email" value="Email" onblur="this.value=!this.value?'Email':this.value;" onclick="this.value='';" class="customer-info-text" maxlength="45"/>
            			<input id="mobile" name="shipAddr.mobile" value="Mobile Number" onblur="validatePhone('mobile');this.value=!this.value?'Mobile Number':this.value;" onclick="this.value='';" class="customer-info-text" maxlength="10" style="border-color: red !important"/>
            		</p>  
					<p align="center" style="margin-top: 10px;"> </p>     
					<p>
        			 	<input name="shipAddr.addr1" value="Address 1" onblur="this.value=!this.value?'Address 1':this.value;" onclick="this.value='';" class="customer-info-text" maxlength="45" style="border-color: red !important"/>           
            			<input name="shipAddr.addr2" value="Address 2" onblur="this.value=!this.value?'Address 2':this.value;" onclick="this.value='';" class="customer-info-text" maxlength="45"/>
            			<input id="city" name="shipAddr.city" value="City" onblur="isValidName('city','City');this.value=!this.value?'City':this.value;" onclick="this.value='';" class="customer-info-text" maxlength="20" style="border-color: red !important"/>
            			<input id="state" name="shipAddr.state" value="State" onblur="isValidName('state','State');this.value=!this.value?'State':this.value;" onclick="this.value='';" class="customer-info-text" maxlength="20" style="border-color: red !important"/>
            		</p>              
                </div>
                
                <div class="clr"></div>
                
                <div class="review-order">         
      				<h3>Review Your Order</h3> 
      				<div>
      					<div style="padding-left: 20px;width: 680px;" class="order-sub-content">
      						<div class="review-order-order-details">     
            					<div class="review-order-cart-list" id="jc-review-order">
            						<div class=" jcarousel-skin-tango">
            							<ul style="float: left; overflow: hidden; position: relative; top: 0px; margin: 0px; padding: 0px; left: 0px; height: 160px;" class="jcarousel-list jcarousel-list-vertical" id="review_order_carousel">
            							  <c:forEach items="${cart.pizzas}" var="pizza" varStatus="status">
            								 <li style="width: 160px ! important; height: 60px; overflow: hidden ! important; float: left; list-style: none outside none;" class="jcarousel-item jcarousel-item-vertical jcarousel-item-1 jcarousel-item-1-vertical" jcarouselindex="1">   
                    								<div style="width:160px; height:30px;"> 
                        									<h6 id="1268808" style="cursor: pointer">${pizza.pizzaName}  ${quantity}</h6>
                        									<p></p> 
                    								</div>  
                  							</li> 
                  						  </c:forEach>
                  						  <c:forEach items="${cart.sides}" var="side" varStatus="status">
            								 <li style="width: 160px ! important; height: 60px; overflow: hidden ! important; float: left; list-style: none outside none;" class="jcarousel-item jcarousel-item-vertical jcarousel-item-1 jcarousel-item-1-vertical" jcarouselindex="1">   
                    								<div style="width:160px; height:30px;"> 
                        									<h6 id="1268808" style="cursor: pointer">${side.name}  ${quantity}</h6>
                        									<p></p> 
                    								</div>  
                  							</li> 
                  						  </c:forEach>
                                  		</ul>
                                  	</div>
                                </div>
                             </div>
                              
                                
                                <div align="center" class="review-order-missing-things">     
                  					<div class="other-saved-addresses">
            							<p>Choose payment type and bank details.</p>
										<h2>Enter Payment Details</h2>
										<p><form:errors path="payment_type_id" cssClass="error" /></p>
										<p><form:errors path="bank_id" cssClass="error" /></p>    
										<div class="jc-extras">
											<p>
												<form:radiobuttons path="payment_type_id" items="${paymentTypes}" itemLabel="paymentType" itemValue="id" />
											</p>
											<p>
												<form:select path="bank_id" items="${banks}" itemLabel="bankName" itemValue="id"></form:select>
											</p>
										</div>
                            		</div>
                            	</div>
                            <p>
                            <!--<input id="saveForm" name="saveForm" class="btTxt submit" type="submit" value="Submit"/>
                            --><a href="#" id="payment-confirm" onclick="setValue();"><img border="0" alt="Edit Cart" src="images/pizzaimages/make_payment.png"></a>
                            </p>
		            	</div>         
		           </div>
      		  </div>
      		</form:form>
		</div>
	</div>
	
	<div class="cart-details">
	
		<div id="jc-cart" class="cart-list">
			<div class=" jcarousel-skin-tango">
				<div class="jcarousel-container jcarousel-container-vertical" style="position: relative; display: block;">
					<div class="jcarousel-clip jcarousel-clip-vertical" style="position: relative;">
						<ul class="jcarousel-list jcarousel-list-vertical" id="cart_carousel" style="float: left; overflow: hidden; position: relative; top: 0px; margin: 0px; padding: 0px; left: 0px; height: 122px;">
							<c:forEach items="${cart.pizzas}" var="pizza" varStatus="status">
								<li class="jcarousel-item jcarousel-item-vertical jcarousel-item-1 jcarousel-item-1-vertical jcarousel-item-placeholder jcarousel-item-placeholder-vertical" style="float: left; list-style: none outside none; height: 56px;" jcarouselindex="1">
									<div style="width:215px; height:50px;">
										<h4>${ pizza.pizzaName}    ${pizza.quantity}</h4>
										<div class="item-price">${pizza.netPrice}</div>
									</div>
								</li>
							</c:forEach>
							<c:forEach items="${cart.sides}" var="side" varStatus="status">
								<li class="jcarousel-item jcarousel-item-vertical jcarousel-item-1 jcarousel-item-1-vertical jcarousel-item-placeholder jcarousel-item-placeholder-vertical" style="float: left; list-style: none outside none; height: 56px;" jcarouselindex="1">
									<div style="width:215px; height:50px;">
										<h4>${ side.name}    ${side.quantity}</h4>
										<div class="item-price">${side.netPrice}</div>
									</div>
								</li>
							</c:forEach>
							<c:forEach items="${cart.coupons}" var="coupon" varStatus="status">
								<li class="jcarousel-item jcarousel-item-vertical jcarousel-item-1 jcarousel-item-1-vertical jcarousel-item-placeholder jcarousel-item-placeholder-vertical" style="float: left; list-style: none outside none; height: 56px;" jcarouselindex="1">
									<div style="width:215px; height:50px;">
										<h4>${coupon.couponCode}    </h4>
										<div class="item-price">${coupon.discountAmt}</div>
									</div>
								</li>
							</c:forEach>
						</ul>
					</div>
					<div class="jcarousel-prev jcarousel-prev-vertical jcarousel-prev-disabled jcarousel-prev-disabled-vertical" style="display: block;" disabled="disabled"></div>
					<div class="jcarousel-next jcarousel-next-vertical" style="display: block;"></div>
				</div>
			</div>
		</div>
		
		<div class="enter-coupon-code">
			<p align="center">
				<a href="#" id="redeem-coupon-button" onclick="submitUrl('/pizza/selectpizza.action')"><img border="0" alt="Edit Cart" src="images/pizzaimages/edit_cart_big.png"></a>
			</p>
        	<ul id="coupons-used"></ul>
        	<div class="price-details">
				<h4>Total price</h4>
			</div>
			<div style="margin-left: 2px;" class="price-details-rate">
				<span class="prices">Net Price</span>
				<span id="net-price-box" class="prices">${cart.totalPrice}</span>
			</div>
			<c:if test="${cart.total_discount > 0.0}">
			<div style="margin-left: 2px;" class="price-details-rate">
				<span class="prices">Total Discount</span>
				<span id="net-price-box" class="prices">${cart.total_discount}</span>
			</div>
			</c:if>
			<div style="margin-left: 2px;" class="price-details-rate">
				<span class="prices">VAT</span>
				<span id="service-tax-box" class="prices">${cart.tax}</span>
			</div>
			<div class="clr"></div>
			<div style="margin-left: 2px;" class="price-details-rate"> 
				<span style="margin-left: 2px; font-weight: bold; font-size: 14px; width: 108px;" class="prices">Grand Total</span>
				<span id="total-price-box" style="font-weight: bold; font-size: 14px; width: 108px;" class="prices">${cart.grandTotal}</span>
			</div>
			
    	</div>
    	
	</div>
</div>

</body>
</html>